.want-to-buy-user-container{
  position: relative;
  .avatar{
    width: 88rpx;
    height: 88rpx;
    border-radius: 44rpx;
    border: 2rpx solid #FFF;
    overflow: hidden;

    &.large{
      width: 120rpx;
      height: 120rpx;
      border-radius: 60rpx;
    }
  }

  .header{
    color: #fff;
    height: 380rpx;
    position: relative;
    .header-content{
      // top: 0;
      bottom: 26rpx;
      left: 20rpx;
      right: 20rpx;
      position: absolute;
      .user-info{
        @include flex;
        @include a-center;
        padding: 0 15rpx;
      }

      
      .sub-item{
        @include sub-item;
        padding-left: 28rpx;
        font-size: 26rpx;
        font-weight: 400;
        .nickname{
          @include text-ellipsis;
          font-size: 28rpx;
          font-weight: 500;
        }
      }
      .signature{
        font-size: 26rpx;
        padding-left: 12rpx;
        padding-top: 25rpx;
      }
      .attention-btn{
        color: #FF759F;
        font-size: 28rpx;
        text-align: center;
        width: 180rpx;
        line-height: 64rpx;
        background:#fff;
        border-radius: 32rpx;
      }
    }
  }
  .data-block{
    @include flex;
    background: #fff;
    border-bottom-left-radius: 20rpx;
    border-bottom-right-radius: 20rpx;

    .data-item{
      @include sub-item;
      @include flex(column);
      @include center;
      font-size: 34rpx;
      font-weight: 500;
      height: 130rpx;
      line-height: 1;

      .title{
        font-size: 24rpx;
        font-weight: 400;
        padding-top: 24rpx;
      }
    }
  }
  .tabs-block{
    @include flex;
    margin-top: 20rpx;
    background: #fff;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    .tab-item{
      @include sub-item;
      @include flex;
      @include center;
      padding: 35rpx 0 20rpx;
      position: relative;

      &.active{
        color: #FF759F;
        &::after{
          content: '';
          height: 5rpx;
          left: 44%;
          right: 44%;
          bottom: 0;
          position: absolute;
          border-radius: 3rpx;
          background: #FF759F;
        }
      }
    }
  }
  .list-block{
    padding-bottom: 112rpx;
    .item{
      padding: 24rpx;
      background: #fff;
      border-radius: 20rpx;
      margin-bottom: 20rpx;
      .user{
        @include flex;
        @include a-center;

        .sub-item{
          @include sub-item;
          margin-left: 20rpx;
          .nickname{
            @include text-ellipsis;
          }
        }
      }
      .content{
        padding: 24rpx;
        .resource{
          margin-top: 18rpx;
        }

        .resource-item{
          width: 180rpx;
          height: 180rpx;
          display: inline-block;
          border: 1px solid #f2f2f2;
          margin-right: 10rpx;
        }
      }

      &:first-child{
        border-top-left-radius: 0;
        border-top-right-radius: 0;
      }
    }
    .goods{
      padding: 0 20rpx;
      border-radius: 10rpx;
      background: #F5F5F5;
      .goods-item{
        @include flex;
        @include a-center;
        height: 140rpx;
        border-bottom: 1px solid #d9d9d9;
        
        .goods-image{
          width: 100rpx;
          height: 100rpx;
        }
        .goods-detail{
          @include sub-item;
          margin-left: 20rpx;
          .goods-name{
            @include text-ellipsis-line;
            height: 76rpx;
          }
          .goods-price{
            color: #FF3939;
            font-size: 22rpx;
          }
        }

        &:last-child{
          border-bottom: 0;
        }
      }
    }
    .num-detail{
      @include flex;
      @include j-between;
      color: #333;
      font-size: 22rpx;
      padding-top: 20rpx;
      .num-item{
        @include flex;
        @include a-center;

        image{
          width: 30rpx;
          height: 30rpx;
          display: block;
          margin-right: 8rpx;
        }
      }
    }
  }
  .download-block{
    left: 0;
    right: 0;
    bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    background: #FFF;
    position: fixed;
    image{
      display: block;
    }
  }
  .empty-state{
    width: 60%;
    margin: 0 auto;
    padding: 100rpx 0;
  }
}